<template>
  <div class="list">
    <ul>
      <li v-for="item in productList" :key="item.id">
        {{item.title}}  -------- {{item.price}}   ----------
        <button @click="addToCart(item)" :disabled="item.inventory === 0">加入购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'ProductList',
  created () {
    this.$store.dispatch('products/getAllProducts')
  },
  computed: {
    ...mapState({
      productList: state => state.products.all
    })
  },
  methods: {
    ...mapActions('cart', [
      'addToCart'
    ])
  }
}
</script>

<style scoped>
ul > li {
  text-decoration: none;
  margin: 20px;
}
</style>
